/**
 * Created by 小敏哥 on 2017/12/6.
 */
import React, {Component} from 'react';
import style from './index.scss';
import ItemList from '../../../../../../../../src/js/components/itemList';
import InputWithDelete from '../../../../../../../js/components/inputWithDelete';

class InputContent extends Component {
    constructor(props) {
        super(props);
    }

    static propTypes = {
        idCardCallBack: React.PropTypes.func.isRequired,//身份证号码回调
        userNameCallBack: React.PropTypes.func.isRequired,//姓名回调
        emergencyContactCallBack: React.PropTypes.func.isRequired,//紧急联系人回调
        emergencyPhoneCallBack: React.PropTypes.func.isRequired,//紧急联系人电话回调
    };

    render() {
        return <div>
            <p className={style.title}><img src="./images/Rectangle 2.png"/> 请填写办证人公民身份号码(如新生儿暂无编赋身份号码，请填写监护人号码)</p>
            <ItemList borderPaddingLeft="20px">
                <InputWithDelete storageKey="idCard" title="身份证号" maxLength={18} placeholder="请输入身份证号码（证件号）"
                                 regular="(^\d{14}(\d|X|x)$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)"
                                 changeValue={(value) => {
                                     return value.toUpperCase();
                                 }}
                                 errorCallBack={(value) => {
                                     this.props.idCardCallBack(value, false);
                                 }} currentCallBack={(value) => {
                    this.props.idCardCallBack(value, true);
                }}/>
                <InputWithDelete storageKey="userName" title="姓名 " regular="^[\u4e00-\u9fa5]+$" maxLength={12}
                                 placeholder="请输入姓名"
                                 errorCallBack={(value) => {
                                     this.props.userNameCallBack(value, false);
                                 }} currentCallBack={(value) => {
                    this.props.userNameCallBack(value, true);
                }}/>
            </ItemList>
            <p className={style.title}><img src="./images/Rectangle 2.png"/> 紧急联系人</p>
            <ItemList borderPaddingLeft="20px">
                <InputWithDelete storageKey="emergencyContact" title="姓名 " regular="^[\u4e00-\u9fa5]+$" maxLength={12}
                                 placeholder="请输入紧急联系人姓名"
                                 errorCallBack={(value) => {
                                     this.props.emergencyContactCallBack(value, false);
                                 }} currentCallBack={(value) => {
                    this.props.emergencyContactCallBack(value, true);
                }}/>
                <InputWithDelete storageKey="emergencyPhone" title="电话" type="number" maxLength={11}
                                 placeholder="请输入紧急联系人电话" regular="(^1\d{10}$)"
                                 errorCallBack={(value) => {
                                     this.props.emergencyPhoneCallBack(value, false);
                                 }} currentCallBack={(value) => {
                    this.props.emergencyPhoneCallBack(value, true);
                }}/>
            </ItemList>
        </div>
    }
}

export default InputContent;